<script setup lang="ts">
import { OrderStatus, Status } from "@/apis/order";
import { ref } from "vue";
const props = defineProps<{
  createTime: string;
  status: number;
}>();
let statusTxt = ref<Status>();
switch (props.status) {
  case OrderStatus.obligation:
    statusTxt.value = "待付款";
    break;
  case OrderStatus.awaitDeliver:
    statusTxt.value = "待发货";
    break;
  case OrderStatus.betake:
    statusTxt.value = "待收货";
    break;
  case OrderStatus.evaluate:
    statusTxt.value = "待评价";
    break;
  case OrderStatus.completed:
    statusTxt.value = "已完成";
    break;
  case OrderStatus.canceled:
    statusTxt.value = "已取消";
    break;
}
</script>
<template>
  <view class="status">
    <text class="date">{{ createTime }}</text>
    <text
      :class="{
        primary:
          status === OrderStatus.awaitDeliver ||
          status === OrderStatus.obligation,
      }"
    >
      {{ statusTxt }}
    </text>
    <text class="icon-delete" v-if="status !== OrderStatus.obligation"></text>
  </view>
</template>

<style>
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 15rpx;
}
.status .date {
  color: #666;
  flex: 1;
}
.status .icon-delete {
  line-height: 1;
  margin-left: 10rpx;
  padding-left: 10rpx;
  border-left: 1rpx solid #e3e3e3;
}
.status .primary {
  color: #ff9240;
}
</style>
